<template>
  <div class="detail" v-if="detailData">
    <div class="title">{{detailData.name}}</div>
    <div class="context">{{detailData.detail.context}}</div>
    <div class="messageBoard">
      <div class="formBox">
        <van-field
          v-model="message"
          rows="1"
          autosize
          label="留言"
          type="textarea"
          placeholder="请输入留言"
        />
        <van-button type="primary" @click="sendMessage">留言</van-button>
      </div>
      <div class="msgList" v-for="(v,i) in detailData.detail.list" :key="i">
        <div class="msgLeft">
          <span></span>
        </div>
        <div class="msgRight">
          <div class="title">{{v.name}}</div>
          <div class="message">{{v.message}}</div>
          <div class="date">{{v.date | getDate}}</div>
          <span class="like" @click="like(v.id)">赞({{v.likeCount}})</span>
          <span class="likeCount" @click="delMessageList(v.id)">X</span>
        </div>
        <!-- {{v.name}}在{{v.date}}说：{{v.message}}
        <a href="javascript:;" @click="delMessageList(v.id)">删除</a>
        <a href="javascript:;" @click="like(v.id)">点赞({{v.likeCount}})</a> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: null
    };
  },
  created() {
    // 获取动态路由的id
    let id = this.$route.params.id;
    // this.$http.get("/api/detail?id=" + id).then(data => {
    //   this.detailData = data.data;
    //   console.log(data.data);
    // });
  },
  computed: {
    // detailData() {
    //   return this.$store.getters.getDetail(this.$route.params.id, this.$route.params.tag)
    // },
    detailData() {
      return this.$store.state.listData[this.$route.params.tag].filter(
        (v, i) => {
          return v.id === this.$route.params.id;
        }
      )[0];
    }
  },
  methods: {
    sendMessage() {
      // 生成评论数据
      let data = {
        data: {
          message: this.message,
          name: "kk",
          id: new Date().getTime(),
          date: new Date(),
          likeCount: 0
        },
        tag: this.detailData.tag,
        id: this.$route.params.id,
        detailData: this.detailData
      };
      this.$store.commit("setMessageList", data);
    },
    delMessageList(id) {
      this.$store.commit("delMessageList", {
        detailData: this.detailData,
        msgId: id
      });
    },
    like(id) {
      this.$store.commit("like", {
        detailData: this.detailData,
        msgId: id
      });
    }
  }
};
</script>

<style lang='scss' scoped>
.detail {
  width: calc(100vw - 40px);
  height: 100%;
  padding: 20px;
  &>.title {
    font-size: 20px;
    font-weight: bolder;
    text-align: center;
    padding: 10px;
  }
  .context {
    width: calc(100vw - 40px);
    font-size: 16px;
    text-indent: 2em;
    line-height: 25px;
  }
  .messageBoard {
    width: calc(100vw - 40px);
    margin-top: 20px;
    .formBox{
      display: flex;
      button{
        padding-left:20px;
      }
    }
    .msgList{
      width:100%;
      position: relative;
      display: flex;
      margin-bottom: 20px;
      border-bottom: 1px solid #ccc;
      .like{
        position: absolute;
        bottom:10px;
        right:10px;
      }
      .likeCount{
        position: absolute;
        top:10px;
        right:10px;
      }
      .msgLeft{
        width:60px;
        span{
          width:60px;
          height:60px;
          border-radius: 50%;
          overflow: hidden;
          display: inline-block;  
          background:#ccc;
        }
      }
      .msgRight{
        flex:1;
        padding-left:20px;
        .title{
          font-size:16px;
          font-weight: bold;
          line-height: 35px;
        }
        .message{
          font-size:14px;
          line-height: 20px;
        }
        .date{
          font-size:12px;
          line-height: 20px;
          padding-top:15px;
          color:#ccc;
        }
      }
    }
  }
}
</style>